import React, { memo, useEffect } from 'react'
import { useDispatch } from 'react-redux'

import {
  getSongCategoryAction,
  getSongCategoryListAction,
} from './store/actionCreators'

import HYSongsHeader from './c-cpns/songs-header'
import HYSongsList from './c-cpns/songs-list'
import { SongsWrapper } from './style'


export default memo(function HYSongs() {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getSongCategoryAction())
    dispatch(getSongCategoryListAction(0));
  }, [dispatch])

  return (
    <SongsWrapper className="wrap-v2">
      <HYSongsHeader />
      <HYSongsList />
    </SongsWrapper>
  )
})
